<template>
  <s-tabs @getList="getList" @tab-click="tabClick" :rtuIndex="rtuIndex" ref="sTabs" :loading="loading">
    <template #search>
      <span class="top_span2" style="margin-right: 14px">传感器索引号</span>
      <el-select size="mini" v-model="rtuIndex" clearable filterable style="width: 240px;">
        <el-option v-for="item in rtuList" :value="item.rtuIndex" :label="item.rtuIndex"
          :key="item.rtuIndex"></el-option>
      </el-select>
      <el-button size="mini" style="margin-right: 10px; margin-left: 22px" type="primary" @click="handleSearch">查
        询</el-button>
      <el-button size="mini" @click="handleReset">重 置</el-button>
    </template>
    <template #list>
      <el-table row-key="id" ref="multiTable" height="calc(100vh - 300px)" :header-cell-class-name="cellClass"
        :data="list" style="width: 100%" :cell-style="{ textAlign: 'center' }" :header-cell-style="{
        background: 'rgba(250, 250, 250, 1)',
        textAlign: 'center',}">
        <el-table-column prop="rtuName" label="传感器名称" width="300px">
          <template slot-scope="scope">
            {{scope.row.rtuIndex+"："+scope.row.rtuName}}
          </template>
        </el-table-column>
        <el-table-column label="设备状态" width="120">
          <template slot-scope="scope">
            <span style="color: #67c23a;">●在线</span>
          </template>
        </el-table-column>
        <el-table-column label="通讯方式" :formatter="comMethod" />
        <el-table-column label="电池电压(V)" :formatter="batteryVoltageFilter" />
        <el-table-column label="信号强度(无线)" prop="rssi" />
        <el-table-column label="丢包率" :formatter="errorRate" />
        <el-table-column label="更新时间" :formatter="handleFormatter" />
      </el-table>
    </template>
  </s-tabs>
</template>

<script>
  import STabs from "@/components/Tabs";
  import { getHistoryData } from "@/api/copy";

  export default {
    components: {
      "s-tabs": STabs
    },
    data() {
      return {
        loading: false,
        list: [],
        rtuIndex: null,
        rtuList: [],
        uuid: "",
      }
    },
    methods: {
      unipFun2(arr) {
        let arr1 = [];
        let newArr = [];
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr1.indexOf(arr[i].dataTime) == -1) {
            console.log(1);
            arr1.unshift(arr[i].dataTime);
            newArr.unshift(arr[i]);
          }
        }
        return newArr;
      },
      handleFormatter(row) {
        return `${new Date(row.dataTime).getFullYear()}-${new Date(row.dataTime).getMonth() + 1}-${new Date(row.dataTime).getDate()} ${new Date(row.dataTime).getHours()}:${new Date(row.dataTime).getMinutes() < 10 ? "0" + new Date(row.dataTime).getMinutes() : new Date(row.dataTime).getMinutes()}`;
      },
      // 获取历史数据
      async getHistoryData() {
        try {
          this.loading = true;
          const info = {
            uuid: this.uuid,
            rtuIndex: this.rtuList.map(item => item.rtuIndex),
            startTimeInSecond: Math.floor(Date.now() / 1000) - 3600,
            endTimeInSecond: Math.floor(Date.now() / 1000),
            online: true,
            pageNo: 1,
            pageSize: 100000000
          };
          const { code, result: { data } } = await getHistoryData(info);
          if (code == 0) {
            this.list.forEach((item, index) => {
              this.$set(item, "oldAckPacks", data.filter(nowItem => nowItem.rtuIndex == item.rtuIndex)[0].ackPacks);
              this.$set(item, "oldSendPacks", data.filter(nowItem => nowItem.rtuIndex == item.rtuIndex)[0].sendPacks);
            });
            this.loading = false;
          }
        } catch (error) {
          console.log("获取历史数据接口报错", error);
        }
      },
      async tabClick(rtuList, uuid) {
        this.rtuList = rtuList;
        this.uuid = uuid;
        await this.getHistoryData();
      },
      async handleSearch() {
        await this.$refs.sTabs.realTimeData();
      },
      async handleReset() {
        this.rtuIndex = null;
      },
      // 丢包率
      errorRate(row) {
        return (((Number(row.sendPacks) - Number(row.oldSendPacks)) - (Number(row.ackPacks) - Number(row.oldAckPacks))) / (Number(row.sendPacks) - Number(row.oldSendPacks)) * 100).toFixed(2) > 0 ? (((Number(row.sendPacks) - Number(row.oldSendPacks)) - (Number(row.ackPacks) - Number(row.oldAckPacks))) / (Number(row.sendPacks) - Number(row.oldSendPacks)) * 100).toFixed(2) + "%" : "0%";
      },
      cellClass(row) {
        if (row.columnIndex === 0) {
          return 'disabledCheck';
        }
      },
      // 电池电压过滤
      batteryVoltageFilter(row) {
        return (Number(row?.batteryVoltage) / 100).toFixed(1);
      },
      // 通讯方式过滤
      comMethod(row) {
        return row?.rssi == 100 ? "有线" : "无线";
      },
      getList(list) {
        this.list = list;
      },
      handleFormatter(row) {
        return `${new Date(row.dataTime).getFullYear()}-${new Date(row.dataTime).getMonth() + 1}-${new Date(row.dataTime).getDate()} ${new Date(row.dataTime).getHours()}:${new Date(row.dataTime).getMinutes() < 10 ? "0" + new Date(row.dataTime).getMinutes() : new Date(row.dataTime).getMinutes()}`;
      },
    }
  }
</script>

<style lang="scss">

</style>